<template>
  <div class="input-container">
    <template v-if="type==='textarea'">
      <textarea
        class="b-textarea"
        :placeholder="placeholder"
        v-model="inputValue"
        :disabled="disabled"
      />
    </template>
    <template v-else>
      <input 
        class="b-input"
        :class="inputStyle"
        :type="showpwd? (pwdShow ? 'text' : 'password') : type"
        :placeholder="placeholder"
        v-model="inputValue"
        :disabled="disabled"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      <span v-if="showpwd || clearable" class="input-suffix">
        <i class="iconfont" :class="{'iconsee2': focused || (inputValue!=='')}" v-if="showpwd" @click="togglePwdSee"></i>
        <i class="iconfont icongary1 b-input-close" v-if="clear" @click="clearInput"></i>
      </span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'BInput',
  props: {
    value: {
      type: [String,Number],
      default: ''
    },
    type: {
      type: String,
      default: 'text',
      validator: value => {
        return ['text', 'textarea'].includes(value)
      }
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    showpwd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      focused: false,
      pwdShow: false
    }
  },
  computed: {
    inputStyle () {
      return [
        this.disabled ? 'b-input-disabled' : '',
      ]
    },
    inputValue: {
      get () {
        return this.value
      },
      set (newValue) {
        this.$emit('input',  newValue)
      }
    },
    clear () {
      return this.clearable && this.inputValue !== ''
    }
  },

  mounted () {
  
  },
  methods: {
    handleFocus () {
      this.focused = true
    },
    handleBlur () {
      this.focused = false
    },
    togglePwdSee () {
      this.pwdShow = !this.pwdShow
    },
    clearInput () {
      this.inputValue = ''
    }
  }
}
</script>

<style scoped lang='less'>
</style>